<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
			color: white;
		}

		.parent {
			width: 100%;

			/* 第一步 父级设置table */
			display: talbe;
		}

		.left,
		.right {
			width: 50%;
			margin: 0 20px;

			/* 第二步，子元素设置talbe-cell => td */
			display: table-cell;
		}

		.left {
			background: #c00;
		}

		.right {
			background: #0e0;
		}
	</style>
</head>

<body>
	<div class="parent">
		<div class="left">Hello World</div>
		<div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam cum laudantium consequuntur
			officia
			facilis sit unde quisquam, consequatur quidem libero voluptatem porro quasi repellendus iure hic delectus
			perferendis recusandae.
			Asperiores laborum quia dolorem ut at alias voluptates impedit recusandae ullam quisquam incidunt, vel quos.</div>
	</div>
</body>

</html>